<template>
<div class="payment-box">
  <h1 class="pay-sucess" v-text="data.paid ? '订单支付成功' : '订单支付失败'"></h1>
  <ul class="info-list">
    <li><span class="title">订单编号</span>{{data.order_id}}</li>
    <li><span class="title">订单金额</span>{{data.total_price}}</li>
  </ul>
  <ul class="btn-inline">
    <li>
       <a href="/order_list" class="btn" :class="data.paid == true?'btn-green':'btn-red'">查看全部订单</a>
    </li>
    <li v-if="data.paid == true">
      <a href="/" class="btn btn-green">继续购物</a>
    </li>
    <li v-else>
      <router-link :to="'/order_detail?id=' + data.order_id" class="btn btn-red">再次支付</router-link>
    </li>
  </ul>
</div>
</template>

<script>
import $http from '@/api'
export default {
  data () {
    return {
      data: {}
    }
  },
  beforeCreate() {
    var orderId = this.$route.query.orderid
    $http.paymentStatus(orderId)
    .then(res => {
      if (res.code === 0) {
        this.data = res.data
      }
    })
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/styles/config';
  .payment-box{
    padding: px2rem(20px);
  }
  .pay-sucess{
    font-size: px2rem(20px);
    text-align: center;
    margin-bottom: px2rem(10px);
    padding-bottom: px2rem(10px);
    border-bottom: px2rem(1px) dotted $gray;
  }
  .info-list{
    line-height: 2;
    .title{
      color: $dark;
      margin-right: px2rem(10px);
    }
  }
  .btn-inline{
    margin-top: px2rem(10px);
    border-top: px2rem(1px) dotted $gray;
    padding: px2rem(10px) 0;
    font-size: 0;
    text-align: center;
    li{
      font-size: px2rem(16px);
      display: inline-block;
    }
  }
  .btn{
    display: block;
    width: px2rem(100px);
    height: px2rem(20px);
    margin: 0 px2rem(10px);
    line-height: px2rem(20px);
    padding: px2rem(5px) px2rem(10px);
    background-color: $dark;
    text-align: center;
    color: $white;
    border-radius: px2rem(15px);
  }
  .btn-green{
    background-color: $green;
  }
  .btn-red{
    background-color: $red;
  }
</style>
